
.box{
		
		overflow: hidden;
		width: 100vw;
		height: 100vh;
		padding: 0.2rem;
		padding-top: 0;
		box-sizing: border-box;
		.header{
			width: 100%;
			height: 10%;
			border-radius: 0.1rem;
			background:linear-gradient(235deg,#060c2100,rgba(0,0,0,0.4),#060c2100);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0.2rem;
			box-sizing: border-box;
			position: relative;
			z-index: 5;
			.title{
				font-size: 0.36rem;
				color: #fff;
				font-weight: bold;
			}
			.right_title{
				display: flex;
				align-items: center;
				img{
					width: 0.5rem;
					margin-right: 0.2rem;
				}
				span{
					font-size: 0.2rem;
					color: #fff;
				}
			}
		}
		.header::after{
			z-index: 9;
			position: absolute;
			content: '';
			bottom:0px;
			width: 50%;
			height: 2px;
			background: linear-gradient(235deg,#060c2100,#04c8e7,#060c2100);
			left: 0;
			right: 0;
			margin: auto;
		}
		
		.select_box{
			display: flex;
			justify-content: flex-end;
			padding-top: 0.2rem;
			z-index: 5;
			position: relative;
			.el-select{
				margin-right: 0.2rem;
			}
			/deep/ .el-input{
				
				--el-input-bg-color:rgb(24,26,33);
				--el-input-border:rgb(24,26,33);
				--el-input-border-color:rgb(24,26,33);
			}
			
		}
		.mid{
			height: 85%;
			display: flex;
			justify-content: space-between;
			.left_mid{
				height: 100%;
				width: 30%;				
			    z-index: 5;
			    position: relative;
				.table{
					border: 1px solid #04c8e7;
					box-shadow: inset 0px 0px 10px 2px #0090b1;
					background-color: rgba(0, 0, 0, 0.1);
					margin-top: 0.15rem;
					padding: 0.15rem;
					border-radius: 0.1rem;
					height: 59%;
					.title{
						color: #fff;
						font-size: 0.24rem;
						width: 100%;
						display: block;
						text-align: left;
						margin-bottom: 0.15rem;
						font-weight: bold;
					}
					.header_table{
						color: #fff;
						height: 10%;
						background-color: rgb(38,40,48);
						display: flex;
						align-items: center;
						justify-content: space-around;
						border-radius: 0.1rem;
						span{
							font-size: 0.14rem;
							width: 13.71%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						span:nth-child(1){
							width: 4%;
						}
					}
					.list_scrool{
						overflow: hidden;
						margin-top: 0.2rem;
						height: 62%;
						/deep/ .cur{
							cursor: pointer;
						}
						.hongse{
							color: rgb(238,102,102);
							font-size: 0.25rem;
						}
						.lanse{
							color: #0b8548;
							font-size: 0.25rem;
						}
						ul{
							padding: 0;
						}
						li{
							display: flex;
							height: 0.5rem;
							align-items: center;
							justify-content: space-around;
							margin-top: 0.02rem;
							span{
								height: 100%;
								font-size: 0.16rem;
								width: 13.71%;
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
								border: 1px solid rgba(255,255,255,0.1);
								border-radius: 0.02rem;
								color: #fff;
							}
							span:nth-child(1){
								width: 4%;
								span{
									border: none;
									background-color: #394a54;
									height: 0.25rem;
									width: 0.25rem;
									border-radius: 100%;
								}
							}
							span:nth-child(4),span:nth-child(5){
								color: #0b8548;
							}
							span:nth-child(6),span:nth-child(7){
								color: #04ada1;
							}
							span:nth-child(8){
								color: #0e81c1;
							}
						}
						li:nth-child(2n){
							background-color: rgb(29,32,39);
						}
					}
					.total{
						margin-top: 1%;
						height: 13%;
						width: 100%;
						display: flex;
						justify-content: space-around;
						align-items: flex-end;
						color: #fff;
						p{
							font-size: 0.12rem;
						}
						.total_minibox{
							width: 12.5%;
							padding: 0.05rem 0.1rem;
							border-radius: 0.1rem;
							background-color: rgb(39,42,49);
							    display: flex;
							    flex-direction: column;
							    align-items: center;
							p{
								margin: 0;
							}
						}
						.qin{
							color: #00d2c3;
							font-size: 0.18rem;
							font-weight: bold;
						}
						.lan{
							color: #0babff;
							font-size: 0.16rem;
							font-weight: bold;
						}
						.dw{
							font-size: 0.12rem;
						}
					}
				}
				.wdfb{
					height: 31.5%;
					display: flex;
					.wdfb_left{
						flex: 4;
						overflow: hidden;
					}
					.wdfb_right{
						flex: 2;
					}
					.header_table{
						height: 20%;
						span{
							width: 23.5%;
						}
						span:nth-child(1){
							width: 6%;
						}
					}
					.list_scrool{
						height: 60%;
						li{
							span{
								width: 23.5%;
							}
							span:nth-child(1){
								width: 6%;
							}
						}
						
					}
				}
			}
			
			.mid_echart{
				width: 25%;
				height: 95.5%;
				margin: 0 0.25rem;
				margin-top: 0.15rem;
				border-radius: 0.1rem;
				border: 1px solid #04c8e7;
				box-shadow: inset 0px 0px 10px 2px #0090b1;
				background-color: rgba(0, 0, 0, 0.1);
				padding: 0.15rem;				
				z-index: 5;
				position: relative;
				.kanban{
						background-color: rgba(0, 0, 0, 0.1);
					    box-sizing: border-box;
					    border-radius: 0.05rem;
					    padding: 5% 0.15rem;
					    display: flex;
					    flex-wrap: wrap;
					    align-items: center;
					    justify-content: center;
					    height: 35%;
						padding-top: 1%;
					div{
						width: 0.68rem;
						margin: 0 0.07rem;
						    height: 51%;
						    display: flex;
						    flex-direction: column;
						    align-items: center;
						    justify-content: center;
						img{
							width: 100%;
							height: 56%;
						}
						label{
							color: rgb(129,129,129);
							    width: 150%;
							    text-align: center;
								font-size: 0.16rem;
							margin-top: 7%;
						}
						label:nth-last-child(1){
							margin-top: 0;
							font-size: 0.12rem;
							margin-bottom: 7%;
							width: 120%;
						}
						.active{
							    color: #fff;
						}
					}
					// img:nth-child(5n){
					// 	margin: 0 0;
					// }
				}
				
			}
			.echart_box{
				
				margin-top: 4%;
				background-color: rgba(0, 0, 0, 0.1);
				height: 30%;
				width: 100%;
			}
			
			.right_echart{
				flex: 1;
				margin-top: 0.15rem;
				height: 95.5%;
				padding: 0.15rem;
				border: 1px solid #04c8e7;
				box-shadow: inset 0px 0px 10px 2px #0090b1;
				background-color: rgba(0, 0, 0, 0.1);
				border-radius: 0.1rem;
				.echart_box{
					margin-top: 8%;
				}
				.charts03{
					margin-top: 0;
				}
			}
		}
	}
	/deep/ .el-loading-mask{
		background: none;
	}
	/deep/ .toolDiv{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	/deep/ .toolitem{
		box-sizing: border-box;
		padding: 0 0.15rem;
		width: 3rem;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		.item{
			width: 50%;
			display: flex;
			align-items: center;
			
		}
	}